<template>
    <div class="container">
        <h2>热门演出</h2>
        <router-link class="hotItem" v-for="(item,sequence) in hot" :key="sequence"
        tag="div"
        :to="'/detail/'+item.activityId"
        >
          <img :src="item.avatar"/>
        <div class="hotMessage">
            <div class="title">{{item.title}}</div>
            <div class="time">{{item.showTime}}</div>
            <div class="site">{{item.siteName}}</div>
            <div class="type">{{item.styles[0]}}</div>
            <div class="price">{{item.activityPrice}}</div>
        </div>
        </router-link>
    </div>
</template>

<script>
import {mapState} from "vuex";
export default {
    name:"Hot",
    computed:{
        ...mapState({
            hot:state=>state.homepage.hot,
        })
    }

}
</script>

<style >
.container {
    display: block;
    padding-top: .5rem;
    background-color: white;
}
.container h2{
    font-size: 10;
    padding-bottom:.4rem 
}
.container .hotItem{
    margin-top:10rem; 
    width: 7.5rem;
    height: 2.86rem;

    margin-top: 10px
}
.container .hotItem img{
    width: 2.14rem;
    height: 2.86rem;
    float: left;
}
.container .hotItem .hotMessage{
    width: 4.2rem;
    height: .8rem;
    float: left;
    margin-left: .4rem
}
.hotMessage .title{
    font-size: 16px;
    line-height: 20px
}
.hotMessage .time {
    margin-top: 10px;
    font-size: 11px;
    color: #aaa
}
.hotMessage .site{
font-size: 11px;
    color: #aaa
}
.hotMessage .type{
   width: 1rem;
    height: .4rem;
    background-color: #f8f8f8;
    border-radius:50px;
    font-size: 10px;
    line-height: .4rem;
    padding: 0 10px;
    margin: 5px 5px 0 0; 
    color: #bbb
}
.hotMessage .price{
    font-size: 16px;
    margin-top: .2rem
}
</style>